<template>
	<uni-forms class="forms" ref="customForm" :rules="customRules" :modelValue="customFormData">
		<!-- 手机号输入框 -->
		<uni-forms-item required name="phone">
			<uni-easyinput v-model="customFormData.phone" maxlength="11" placeholder="请输入您的手机号" />
		</uni-forms-item>
		<!-- 手机验证码输入框 -->
		<uni-forms-item required name="verCode" class="vreCode">
			<uni-easyinput v-model="customFormData.verCode" maxlength="6" placeholder="请输入手机验证码" />
			<view class="getVer" v-html="vervode.data" @click="getVer" v-if="vervode.data">
				
			</view>
			<view class="getVer" @click="getVer" v-else>
				获取验证码
			</view>
			<!-- <view class="getVer">
				获取验证码
			</view> -->
			<!-- <uni-countdown class="getVer" :show-day = "false" :show-hour="false" :show-minute= "false" :second="60" /> -->
		</uni-forms-item>
	</uni-forms>
	<!-- 下一步按钮 -->
	<button type="primary" class="loginBtn" @click="next">下一步</button>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import api from '../../src/utils/api.js'
	// 自定义表单数据
	const customFormData = reactive({
		phone: '',
		verCode: '',
	})
	// 自定义表单校验规则
	const customRules = reactive({
		phone: {
			rules: [{
					required: true,
					errorMessage: '请输入手机号',
					trigger: 'blur'
				},
				{
					pattern: /^1[3-9]\d{9}$/,
					errorMessage: '请输入正确的手机号格式',
					trigger: 'blur'
				},
			]
		},
		verCode: {
			rules: [
				{
					required: true,
					errorMessage: '验证码不能为空'
				},
				{
					validateFunction:function(rule,value,data,callback){
						if (value.toLowerCase()!=vervode.value.text.toLowerCase()) {
							callback('请输入正确的验证码')
						}
						return true
					}
				}
			]
		},
	})
	// 获取验证码
	const vervode = ref({})
	const getVer = () => {
		uni.request({
			url:'http://localhost:3000/captcha'
		}).then(res=> {
			console.log(res.data)
			vervode.value = res.data
		}).catch(err=>{
			console.log(err)
		})
	}
	// 下一步
	const customForm = ref(null);
	const next=()=>{
		customForm.value.validate().then(res => {
			console.log('success', res);
			api('/appforget',{
				...res
			}).then(res=>{
				console.log(res)
				if(res.state==200){
					uni.navigateTo({
						url:'/pages/change/change?userid='+res.data[0].user_id
					})
				}else{
					uni.showToast({
						title: `该手机号未绑定账户，请重新输入`,
						icon:'none'
					})
					customFormData.phone=''
					customFormData.verCode=''
					getVer()
				}
			}).catch(err=>{
				console.log(err)
			})
			// uni.showToast({
			// 	title: `校验通过`
			// })
			// uni.navigateTo({
			// 	url:'/pages/change/change'
			// })
		}).catch(err => {
			console.log('err', err);
			// customForm.value.resetFields();	//重置
		})
	}
</script>

<style lang="scss" scoped>
	// 输入框
	.forms {
		width: 100%;
		padding: 0 75rpx;
		box-sizing: border-box;
		// height: 292rpx;
		padding-top: 66rpx;
		// 验证label前面的星号去除
		::v-deep .uni-forms-item__label {
			display: none !important;
		}

		// 设置输入框的样式
		::v-deep .uni-easyinput__content-input {
			height: 100rpx;
			box-sizing: border-box;
			// border-bottom: 2rpx solid rgba(215, 215, 215, 1);
			font-size: 26rpx !important;
			padding-left: 10rpx !important;
		}

		// 设置外边框的样式
		::v-deep .is-input-border {
			border: none;
			border-bottom: 2rpx solid #000;
			border-radius: 0 !important;
		}

		// 默认文字样式
		::v-deep .uni-input-placeholder {
			color: rgb(153, 153, 153);
			font-size: 26rpx;
		}

		// 验证码
		.vreCode {
			position: relative;

			::v-deep .uni-easyinput__content-input {
				width: 340rpx !important;
				flex: 0 0 340rpx !important;
			}

			.getVer {
				width: 160rpx;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
				font-family: 'ArialMT', 'Arial', sans-serif;
				font-size: 28rpx;
				color: #1890FF;
			}

			.prompt {
				font-family: 'ArialMT', 'Arial', sans-serif;
				font-size: 24rpx;
				color: #aaa;
				position: absolute;
				bottom: -48rpx;
				left: 10rpx;
			}
		}

		.form-item {
			display: flex;
			align-items: center;
		}
	}
	// 下一步按钮
	.loginBtn{
		width: 600rpx;
		height: 80rpx;
		border-radius: 72rpx;
		background-color: rgba(24, 144, 255, 1);
		margin-top: 84rpx;
		box-shadow: 10rpx 10rpx 20rpx rgba(145, 213, 255, 1);
		font-family: 'ArialMT', 'Arial', sans-serif;
		color: #fff;
		font-size: 24rpx;
		text-align: center;
		line-height: 80rpx;
	}	
</style>